<%--
  Created by IntelliJ IDEA.
  User: songtie
  Date: 2015/4/21
  Time: 11:34
  To change this template use File | Settings | File Templates.
--%>

<%@ include file="../common/IncludeTop.jsp"%>


<div id="Welcome">
    <div id="WelcomeContent">
        Welcome to MyPetStore!
    </div>
</div>

<div id="Main">
    <div id="Sidebar">
        <div id="SidebarContent">

            <div id="flip1" style="height: 40px; width: 100%; alignment: left; border-radius: 5px;">
                <a href="viewCategory?categoryId=FISH"><img src="images/fish_icon.gif" /></a>
                <i class="arrowMored"></i>
            </div>
            <div id="panel1" style="height: 70px; width: 100%; alignment: left; border-radius: 5px;">
                <%--            <br/> Saltwater, Freshwater <br/>--%>
                <img src="images/fish1.gif" style="width: 50px; height: 50px;"/>
                <img src="images/fish2.gif" style="width: 50px; height: 50px;"/>
                <img src="images/fish3.gif" style="width: 50px; height: 50px;"/>
            </div>


            <div id="flip2" style="height: 40px; width: 100%; alignment: left; border-radius: 5px;">
                <a href="viewCategory?categoryId=DOGS"><img src="images/dogs_icon.gif" /></a>
                <i class="arrowMored"></i>
            </div>
            <div id="panel2" style="height: 70px; width: 100%; alignment: left; border-radius: 5px;">
                <%--            <br/> Saltwater, Freshwater <br/>--%>
                <img src="images/dog3.gif" style="width: 50px; height: 50px;"/>
                <img src="images/dog4.gif" style="width: 50px; height: 50px;"/>
                <img src="images/dog5.gif" style="width: 50px; height: 50px;"/>
            </div>


            <div id="flip3" style="height: 40px; width: 100%; alignment: left; border-radius: 5px;">
                <a href="viewCategory?categoryId=CATS"><img src="images/cats_icon.gif" /></a>
                <i class="arrowMored"></i>
            </div>
            <div id="panel3" style="height: 70px; width: 100%; alignment: left; border-radius: 5px;">
                <%--            <br/> Saltwater, Freshwater <br/>--%>
                <img src="images/cat1.gif" style="width: 50px; height: 50px;"/>
                <img src="images/cat2.gif" style="width: 50px; height: 50px;"/>
                <img src="images/dog6.gif" style="width: 50px; height: 50px;"/>
            </div>


            <div id="flip4" style="height: 40px; width: 100%; alignment: left; border-radius: 5px;">
                <a href="viewCategory?categoryId=REPTILES"><img src="images/reptiles_icon.gif" /></a>
                <i class="arrowMored"></i>
            </div>
            <div id="panel4" style="height: 70px; width: 100%; alignment: left; border-radius: 5px;">
                <%--            <br/> Saltwater, Freshwater <br/>--%>
                <img src="images/snake1.gif" style="width: 50px; height: 50px;"/>
                <img src="images/lizard1.gif" style="width: 50px; height: 50px;"/>
                <img src="images/bird1.gif" style="width: 50px; height: 50px;"/>
            </div>


            <div id="flip5" style="height: 40px; width: 100%; alignment: left; border-radius: 5px;">
                <a href="viewCategory?categoryId=BIRDS"><img src="images/birds_icon.gif" /></a>
                <i class="arrowMored"></i>
            </div>
            <div id="panel5" style="height: 70px; width: 100%; alignment: left; border-radius: 5px;">
                <%--            <br/> Saltwater, Freshwater <br/>--%>
                <img src="images/bird2.gif" style="width: 50px; height: 50px;"/>
                <img src="images/bird1.gif" style="width: 50px; height: 50px;"/>
                <img src="images/bird2.gif" style="width: 50px; height: 50px;"/>
            </div>



        </div>
    </div>

    <div class="banner_slider" id="banner_slider">

        <div class="banner_slider_pics" id="banner_slider_pics" >
            <a href="viewCategory?categoryId=CATS" class="CATS" >
                <img src="images/cat.jpg" name="CATS">
            </a>
            <a href="viewCategory?categoryId=BIRDS" class="BIRDS">
                <img src="images/yw.png" name="BIRDS" >
            </a>
            <a href="viewCategory?categoryId=REPTILES" class="REPTILES">
                <img src="images/xy.png" name="REPTILES"  >
            </a>
            <a href="viewCategory?categoryId=DOGS" class="DOGS">
                <img src="images/dog.jpg" name="DOGS"  >
            </a>
            <a href="viewCategory?categoryId=FISH" class="FISH">
                <img src="images/jy.png" name="FISH" >
            </a>
            <a href="viewCategory?categoryId=CATS" class="CATS">
                <img src="images/cat.jpg" name="CATS" >
            </a>
            <a href="viewCategory?categoryId=BIRDS" class="BIRDS">
                <img src="images/yw.png" name="BIRDS" >
            </a>
        </div>

        <div class="banner_slider_arrow">
            <a href="#" class="arrow_item prev" id="arrow_prev">&lt;</a>
            <a href="#" class="arrow_item next" id="arrow_next">&gt;</a>
        </div>

        <div class="banner_slider_dots" id="banner_slider_dots">
            <a href="#" class="dots_item dots_active"></a>
            <a href="#" class="dots_item"></a>
            <a href="#" class="dots_item"></a>
            <a href="#" class="dots_item"></a>
            <a href="#" class="dots_item"></a>
        </div>

<%--        <span class="tooltiptext">tips</span>--%>
    </div>

</div>

<%@include file="../common/IncludeBottom.jsp"%>